<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id='app'>
		<study-process>
			<p slot='slot_top'>
				Vuejs 比起别的框架真的简洁好多！
			</p>

				我学习到了  Slot 这个章节。

			<h5 slot='slot_bottom'>
				再也不怕H5 项目了~
			</h5>
		</study-process>
	</div>
	<script>
		Vue.component('study-process', {
		  template: '<div>' +
		  '<slot name="slot_top"></slot>' +
		  '<slot></slot>' +
		  '<slot name="slot_bottom"></slot>' +
		  '</div>'
		})
		var app = new Vue({
			el: '#app',
			data: {
				msg:'测试'
			}
		})
	</script>
</body>
</html>

